Estoy usando -webkit-line-clamp para truncar texto como el siguiente ejemplo
.box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 100px; } <div class="box"> <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p> </div>Aquí obtengo 3 puntos al final del truncamiento, quiero tener un enlace " leer más " al final del texto truncado en lugar de ... . Por favor, hágame saber si esto se puede lograr a través de css o JS
¿Qué tal este código? Este código elimina el botón cuando no se desborda .
var container = document.getElementsByClassName('container'); var i; for (i=0;i<container.length;i++) { if (container[i].firstElementChild.scrollHeight<=container[i].firstElementChild.clientHeight) { container[i].lastElementChild.style.display = 'none'; } } function more(x) { var box = x.parentElement.firstElementChild; if (!box.classList.contains('box-more')) { box.classList.add('box-more'); x.innerHTML = "Close"; } else { box.classList.remove('box-more'); x.innerHTML = "Read More"; } } .box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 100px; } .box-more { -webkit-line-clamp: unset !important; } <div class="container"> <div class="box"> <p>Hey, don't cut me off like that. I want</p> </div> <button onclick="more(this)">Read More</button> </div> <div class="container"> <div class="box"> <p>Hey, don't cut me off like that. I want to speak my mind and don't appreciate being put into a box.</p> </div> <button onclick="more(this)">Read More</button> </div>